import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import style from './my.module.css'
import timestampToTime from '../../utils/formatDate'

let { main, main1, main12, data, all } = style
export default function Shop() {
  const [UseSetList, setList] = useState([])
  const navigate = useNavigate()
  useEffect(() => {
    axios.get('http://localhost:3004/dynamic').then(res => {
      setList(res.data)
    })
  }, [])
  return (
    <div className={all}>
      <div className={main}>
        {UseSetList.map(function (ele) {
          return (
            <div
              key={ele.id}
              className={main1}
              onClick={() => {
                navigate(`/detail/${ele.id}`, {
                  state: {
                    title: ele.title,
                    contents: ele.content,
                    date: timestampToTime(ele.create_time * 1),
                  },
                })
              }}
            >
              <h1>{ele.title}</h1>
              <div className={main12}>
                <p>{ele.content}</p>
              </div>
              <p className={data}>{timestampToTime(ele.create_time * 1)}</p>
            </div>
          )
        })}
      </div>
    </div>
  )
}
